<template>
    <div class="calculate-factor-info-trans">
       <yh-dialog drag title="关联原始范围设置" :visible="visibleTemp" width="740px" @close="closeModal" :close-on-click-modal="false">
            <CalculateFactorTrantableInline
                ref="trans"
                url="/original/bound/boundList"
                index-key="boundCode"
                left-placeholder="编号/名称"
                right-placeholder="编号/名称"
                :columns="columns"
                :right-table-data="selected"
                :search-names="['boundCode', 'boundName']"
                :tableName='tableName'
            />
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
            </div>
       </yh-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import CalculateFactorTrantableInline from '@/pages/quota/calculate-factor/calculate-factor-info/calculate-factor-trantable-inline.vue';
import DictionConstUtil from '@/utils/diction-const-util';

@Component({ name: 'CalculateFactorInfoTrans', components: { CalculateFactorTrantableInline } })
export default class CalculateFactorInfoTrans extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop({ default: () => {} }) selected: any[];
    @Prop({ default: '' }) tableName: string;
    // 表头
    private columns: any[] = [
        {
            label: '范围类型',
            prop: 'boundType',
            width: 80,
            fun: function(row) {
                return DictionConstUtil.BoundType[row.boundType];
            },
        },
        {
            label: '范围编码',
            prop: 'boundCode',
            width: 80,
            fun: null,
        },
        {
            label: '范围名称',
            prop: 'boundName',
            width: null,
            fun: null,
        },
    ];
    private visibleTemp = false;

    @Watch('visible')
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    // 关闭弹窗
    closeModal() {
        this.syncVisible = false;
    }

    onSubmit() {
        let dom = this.$refs['trans'] as CalculateFactorTrantableInline;
        this.onEmitSubmit(dom.getRightAllData());
        this.closeModal();
    }

    @Emit('on-submit')
    onEmitSubmit(data): any[] {
        return data;
    }
}
</script>

<style lang="scss" scoped>
.calculate-factor-info-trans /deep/ .el-dialog__body {
    height: 478px;
    max-height: none;
}
</style>
